<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>生成田字格</title>
    <style type="text/css">
        body {
            margin: 0;
            background-color:#b1b1b1;
        }
        input[type="file"] {
            position:absolute;left:20px;top:430px;
        }
    </style>
</head>
<body>
    <input type="file" onchange="readLocalFile(this)" />
    <script src="../libs/ColorManager.js"></script>
    <script src="../libs/Unify.js"></script>
    <script src="../libs/minicomps.min.js"></script>
    <script src="../libs/pinyin_dict_all.js"></script>
    <script src="../libs/easeljs.js"></script>
    <script src="../libs/moonEaseljs.js"></script>
    <script>
       
        const { Toggle, HSlider,VSlider,Panel, Canvas ,Button,TextArea,TextBox,TextInput,Label,Window,Image,LabelInput,TipsManager,RadioButton,ColorPicker,TabbarWindow,Checkbox,Knob,Stage,MoonTextArea,Dropdown} = mc
        const width = Stage.width;
        const height = Stage.height;
        var canvasW=794;
        var canvasH=1123;
        var canvasX=(width-canvasW)/2;
        var tians=[];
        var fonts=[];
        const parent=document.body;
        if(Unify.isMobile()){
            canvasW=width;
            canvasH=height;
            new Label(parent,300,200,'推荐使用电脑打开操作').setFontSize(50);
        }

        createjs.Ticker.framerate = 30;
        var canvas=new Canvas(parent,canvasX,0,canvasW,canvasH);
        var stage=new createjs.Stage(canvas);
        createjs.Ticker.addEventListener("tick",(e)=>{stage.update();});

        var layerBg=new createjs.Container();
        var layerMid=new createjs.Container();
        var layerContent=new createjs.Container();
        var layerName=new createjs.Container;
        stage.addChild(layerBg);
        stage.addChild(layerMid);
        stage.addChild(layerContent);
        stage.addChild(layerName);

        layerMid.addEventListener('dblclick',()=>{layerMid.removeAllChildren()});
        layerBg.addEventListener('dblclick',()=>{layerBg.removeAllChildren()});
        layerName.addEventListener('dblclick',()=>{layerName.removeAllChildren()});
        // for(var i=3;i<=11;i++){
        //     var poly = moonPolygon({sides:i,isTurn:true});
        //     stage.addChild(poly);
        //     poly.x=100;
        //     poly.y=i*150-450
        // }

        // for(var i=3;i<=10;i++){
        //     var poly = moonFlower({sides:i,r3:50,c1:'#EEEEEE',c2:'#EEEEEE',isTurn:true});
        //     stage.addChild(poly);
        //     poly.x=300;
        //     poly.y=i*150-400
        // }
        // var shape = new createjs.Shape()
	    //   shape.graphics.f('red').dc(0,0,50);
        //   stage.addChild(shape);
        //   moonDrag(shape)

        //   var shape = moonTian();
        //   shape.x=shape.y=200;
        //   stage.addChild(shape);
        //   moonDrag(shape)

        //画田字形
        function createTian(w=50,h=50,colOut="#666666",colIn="#DDDDDD"){
            return check.checked?moonRect(w,h,colOut):moonTian(w,h,colOut,colIn);
        }
        function createRect(w=100,h=100,color="#ffffff"){
            let shape = new createjs.Shape();
            let [w2,h2]=[w/2,h/2];
            shape.graphics.f(color).dr(-w2,-h2,w,h);
            return shape;
        }
        function createCircle(r=100,color="#ffffff"){
            let shape = new createjs.Shape();
            shape.graphics.f(color).dc(0,0,r);
            return shape;
        }
        function createFlower(r=100,num=4,color="#ffffff"){
            let container = new createjs.Container();
            let center=createCircle(r);
            container.addChild(center);
            for(let i=0;i<num;i++){
                let shape=createCircle(r*0.6);
                //以圆为中心旋转
                shape.x=r*0.6*Math.cos(i*2*Math.PI/num);
                shape.y=r*0.6*Math.sin(i*2*Math.PI/num);
                container.addChild(shape);
            }
            return container;
        }
        function createShizi(r=100,color="#ffffff"){
            let container = new createjs.Container();
            container.addChild(createRect(r,r*0.7));
            container.addChild(createRect(r*0.7,r));
            return container;
        }
        function createMid(type){
            layerMid.removeAllChildren();
            var [width,height]=[canvas.width,canvas.height];
            var [w,h,r]=[width*0.7,height*0.7,width*0.35];
            var shape;
            var index=parseInt(type);
            switch(index){
                case 0:  shape=createRect(w,w);   break;
                case 1:  shape=createCircle(r);   break;
                case 2:
                case 3:
                case 4:
                    shape=createFlower(r,2*index);
                    if(index==2)shape.rotation=45;
                    break;
                case 5:  shape=createShizi(w,h);   break;
                case 6:  shape=moonPolygon({radius:r,sides:index,color:'white'});break;
                case 7:  shape=moonPolygon({radius:r,sides:index+1,color:'white'});break;
                case 8:  shape=createRect(width,height,'#ffffff');break;
            }
            shape.x=(canvas.width)/2;
            shape.y=(canvas.height)/2;
            layerMid.addChild(shape);
            onSlider();
        }
        //---------------
        var hasMid=true;
        let [x,y]=[20,20];
        let setNames=[['单个宽高',55],['格子间距',4],['边框颜色',"#111111"],['十字颜色',"#AAAAAA"],['横排数量',12],['竖排数量',18]]
        let setInputs=[];
        for(let i=0;i<setNames.length;i++){
            let [name,value]=setNames[i];
            y=20+i*30;
            let label=new LabelInput(parent,x,y,name);
            label.input.text=value;
            setInputs.push(label.input);
        }
        y+=30;
        let btnNames=['生成田字格','清除田字格'];
        for(let i=0;i<btnNames.length;i++){
            let name=btnNames[i];
            let btn=new Button(parent,x,y,name,onBtn);
            btn.setSize(75);
            btn.index=i;
            btn.x=20+i*80;
        }
        new Label(parent,0,0,'双击可删除相关内容');
        new Label(parent,x,y+=22,'双击田字格可以单独删除');
        new ColorPicker(parent,x,y+=20);
        let check=new Checkbox(parent,x+110,y+5,'无田字');
        y+=20;
        let setName2s=[['场景宽度',794],['场景高度',1123]]
        let setInput2s=[];
        for(let i=0;i<setName2s.length;i++){
            let [name,value]=setName2s[i];
            y+=30;
            let label=new LabelInput(parent,x,y,name);
            label.input.text=value;
            setInput2s.push(label.input);
        }
        new Button(parent,x,y+=30,'修改场景宽高',()=>{canvas.width=setInput2s[0].text;canvas.height=setInput2s[1].text;}).setSize(80);
        new Button(parent,x+80,y,'下载本页',()=>Unify.saveCanvas(canvas._canvas)).setSize(80);
        var ddNames=[];
        for(let i=1;i<=4;i++) ddNames.push('背景水墨画'+i);
        for(let i=1;i<=4;i++) ddNames.push('背景为春天'+i);
        for(let i=1;i<=4;i++) ddNames.push('春天的插画'+i);
        for(let i=1;i<=4;i++) ddNames.push('背景为风景'+i);
        new Dropdown(parent,x,y+=30,ddNames,0,onChangeBgImage);

        new Label(parent,x,y+=30,'使用本地图片做为背景')

        y+=50;
        let setName3s=[['字体字号',40],['字体颜色','#AAAAAA'],['字体选择','方正硬笔楷书简体']];
        let setInput3s=[];
        for(let i=0;i<setName3s.length;i++){
            let [name,value]=setName3s[i];
            let label=new LabelInput(parent,x,y+=30,name);
            label.input.text=value;
            setInput3s.push(label.input);
        }
        new Label(parent,x,y+=30,'可把文字粘贴到这里生成字贴')
        let fontInput=new TextInput(parent,x,y+=20).setSize(160);
        new Button(parent,x,y+=30,'生成字贴',createFonts);
        ddNames=['方正硬笔楷书简体','方正幼线简体','仿宋','方正隶书简体','宋体'];
        new Dropdown(parent,x,y+=30,ddNames,0,onChangeFontFamily).setSize(160);

        ddNames=['创建中背景方形','创建中背景圆形','创建中背景四花形','创建中背景六花形','创建中背景八花形','创建中背景十字形','创建中背景六边形','创建中背景八边形','全屏'];
        new Dropdown(parent,x,y+=30,ddNames,0,onChangeMidBg).setSize(160);
        let slider=new HSlider(parent,x,y+=50,'修改中背景的缩放',50,0,100,onSlider).setSize(160);
        
        ddNames=['创建班级姓名','删除班级姓名']
        for(let i=0;i<ddNames.length;i++){
            let name=ddNames[i];
            let btn=new Button(parent,x,y,name,onClassName);
            btn.setSize(75);
            btn.index=i;
            btn.y+=30;
            btn.x=20+i*80;
        }
        let nameRect=new LabelInput(parent,x,y+=60,'位置宽高').input;
        nameRect.text='250,800,300,55';
        new Button(parent,x,y+=30,'创建方形',onCreateRect);

        function onSlider(e){
            let scale=slider.value/100+0.5;
            if(layerMid.getChildAt(0)) layerMid.getChildAt(0).scale=scale;
        }

        function onBtn(e){
            let index=e.target.index;
            tians.length=fonts.length=0;
            layerContent.removeAllChildren();
            switch(index){
                case 0:
                    createTians();
                    break;
                case 1:
                    layerBg.removeAllChildren();
                    break;
            }
        }
        function onChangeFontFamily(e){
            setInput3s[2].text=e.detail.text;
        }
        function onChangeMidBg(e){ 
            createMid(e.detail.index);
        }
        function createFonts(){
            if(tians.length==0){
                Unify.Alert('先生成田字格');
                return;
            }
            for(var i=0;i<fonts.length;i++){
                var t=fonts[i];
                layerContent.removeChild(t);
            }
            fonts.length=0;
            let arr=[];
            for(let i=0;i<setInput3s.length;i++){
                let value=setInput3s[i].text;
                if(!isNaN(value)) value=Number(value);
                arr.push(value);
            }
            let [fontSize,fontColor,fontFamily]=arr;
            console.log(arr)
            let [w1,w2]=[Number(setInputs[0].text),fontSize];
            let w=(w1-w2)/2;
            let vals=fontInput.text.split('');
            for(var i=0;i<tians.length;i++){
                var t=tians[i];
                if(t.parent){
                    let txt = new createjs.Text(vals[i], `${fontSize}px ${fontFamily}`, fontColor);
                    [txt.x,txt.y]=[t.x+w,t.y+w];
                    layerContent.addChild(txt);
                    fonts.push(txt);
                }
            }
        }
        function createTians(){
            let arr=[];
            for(let i=0;i<setInputs.length;i++){
                let value=setInputs[i].text;
                if(!isNaN(value)) value=Number(value);
                arr.push(value);
            }
            let [w,g,c1,c2,xnum,ynum]=arr;
            let [rw,rh]=[xnum*(w+g),ynum*(w+g)];
            let x=(canvas.width-xnum*(w+g-1))/2;
            let y=(canvas.height-ynum*(w+g-1))/2;
            // if(hasMid){
            //     var s=createRect(rw,rh);
            //     s.x=x-g/2;
            //     s.y=y-g/2;
            //     layerContent.addChild(s);
            // }
            for(let i=0;i<ynum;i++){
                for(let j=0;j<xnum;j++){
                    var s=createTian(w,w,c1,c2);
                    s.x=x+j*(w+g);
                    s.y=y+i*(w+g);
                    layerContent.addChild(s);
                    tians.push(s);
                    s.addEventListener('dblclick',onClick);
                }
            }
        }
        function onClick(e){
            let t=e.target;
            layerContent.removeChild(t);
        }
        function onChangeBgImage(e){
            let index=Number(e.detail.index);
            console.log(index)
            layerBg.removeAllChildren();
            let url=`../rec/ai/shuimohua${index+1}.jpg`;
            if(index>=4) url=`../rec/ai/chuntian${index-3}.jpg`;
            if(index>=8) url=`../rec/ai/chahua${index-7}.jpg`;
            if(index>=12) url=`../rec/ai/fengjing${index-11}.jpg`;
            let bitmap = new createjs.Bitmap(url);
            layerBg.addChild(bitmap);
        }
        function readLocalFile(input) { 
            layerBg.removeAllChildren(); 
            if (window.FileReader) {  
                var file = input.files[0];  
                filename = file.name.split(".")[0];
                var reader = new FileReader(); 
                reader.onload = function() {  
                    //console.log(this.result);
                    let bitmap = new createjs.Bitmap(this.result);
                    setTimeout(()=>{
                        layerBg.addChild(bitmap);
                        let [w,h]=[bitmap.image.width,bitmap.image.height];
                        bitmap.x=canvas.width/2-w/2;
                        bitmap.y=canvas.height/2-h/2;
                    },100)
                }
                reader.readAsDataURL(file);//读取图片
            }
        }
       
        function onClassName(e){
            let index=e.target.index;
            layerName.removeAllChildren();
            if(index==0){
                let vals=['班级','_','姓名','_'];
                let nums=[50,100,200,250]
                let x=0;
                for(let i=0;i<vals.length;i++){
                    let val=vals[i];
                    let txt 
                    if(val=='_') txt=moonRect(100,0.5,'#000');
                    else         txt=new createjs.Text(val, `22px 黑体`, '#000');
                    layerName.addChild(txt); 
                    if(val=='_'){
                        txt.y=30;
                    }else{
                        txt.y=3;
                    }
                    txt.x=nums[i];
                }
            }
        }
        function onCreateRect(e){
            let arr=nameRect.text.split(',');
            let rect=moonRect(arr[2],arr[3],"#000")
            rect.x=Number(arr[0]);
            rect.y=Number(arr[1]);
            layerName.addChild(rect);
            moonDrag(rect);
        }
        if(Unify.isMobile()){
            canvas.y=y+=30;
            canvas.x=0;
        }
        /** 可画虚线
            (createjs.Graphics.Dash = function(instr) {
                if (instr == null) { instr = [0]; }
                this.instr = instr;
            }).prototype.exec = function(ctx) { 
                ctx.setLineDash(this.instr);
            };
            createjs.Graphics.prototype.dash = function(instr) {
                return this.append(new createjs.Graphics.Dash(instr));
            }
            var shape = new createjs.Shape().set({x:0.5,y:0.5});
            shape.graphics.s("#f00").dash([10,5]).dr(10,10,40,40)
            stage.addChild(shape);
        */
    </script>
</body>

</html>